<template>
  <table>
    <thead border="0" cellspacing="0" cellpadding="">
      <tr>
        <th v-for="item in TABLE_HEAD" :key="item">{{ item }}</th>
      </tr>
    </thead>
    <tbody>
      <table-row
        v-for="item in data"
        :key="item.id"
        :row-data="item"
      >
        <button>+tag</button>
        <span class="tag" v-for="tag in item.tags" :key="tag">{{ tag }}</span>
      </table-row>
    </tbody>
  </table>
</template>

<script>
import TableRow from '../components/table-row.vue';
import { TABLE_HEAD } from '../constants/conf.js';
import axios from 'axios';

const api = 'https://www.escook.cn/api/goods';

export default {
  components: {
    TableRow,
  },
  data () {
    return {
      TABLE_HEAD,
      data: [],
    };
  },
  async created () {
    const res = await axios({
      method: 'get',
      url: api,
    });
    this.data = res.data.data;
  },
}
</script>

<style scoped>
table {
  width: 100%;
  border-top: 1px solid #aaa;
  border-left: 1px solid #aaa;
  border-collapse: collapse;
}
table .tag {
  display: inline-block;
  padding: 4px;
  background: pink;
  margin-left: 8px;
  border-radius: 4px;
  font-size: 10px;
}
table th {
  text-align: left;
  border-right: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  padding: 8px;
}
tbody tr:nth-child(2n + 1) {
  background-color: #f5f5f5;
}
</style>